<template>
  <div class="dialog">
    <h1>Dialog 组件示例</h1>
    <p>首先，我们可以在代码中使用对话框作为组件，在代码中使用。</p>
    <Demo :component="Dialog1Demo" />
    <p>第二，我们可以在代码中使用showDialog函数来使用Dialog在代码。</p>
    <Demo :component="Dialog2Demo" />
  </div>
</template>

<script lang="ts">
import Demo from "../../components/Demo.vue";
import Dialog1Demo from "../../components/Dialog1.demo.vue";
import Dialog2Demo from "../../components/Dialog2.demo.vue";
export default {
  components: {
    Demo,
  },
  setup() {
    return {
      Dialog1Demo,
      Dialog2Demo,
    };
  },
};
</script>
<style lang="scss">
.dialog {
  > h1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
  }
}
</style>
